<template>
    <div>
        <Editor id="tinymce" v-model="html" :init="init"></Editor>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/media";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/codesample";
import "tinymce/plugins/codesample";
import "tinymce/plugins/indent2em";
import uploadFile from "@/utils/DZUploadFile";
// import "tinymce/icons/default/icons";
@Component({
    components: { Editor }
})
export default class UITinymceEditor extends Vue {

    @Prop() data;

    html = "";

    init = {
        paste_auto_cleanup_on_paste: true,
        paste_remove_styles: true,
        paste_remove_styles_if_webkit: true,
        paste_strip_class_attributes: true,
        paste_as_text: true,
        image_dimensions: false,
        selector: "#tinymce",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        height: 500,
        plugins: "image link code table lists wordcount indent2em", //引入插件
        toolbar:
            "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough  | alignleft aligncenter alignright alignjustify outdent indent indent2em | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen removeformat subscript superscript ", //工具栏
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, //禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        file_picker_types: 'image',
        images_upload_credentials: true,
        fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
        font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
        /**
         * 下面方法是为tinymce添加自定义插入图片按钮
         * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
         */
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function (blobInfo, success, failure) {
            // let formdata = new FormData();
            // formdata.append("image", blobInfo.blob());
            uploadFile.editorUploadImage(blobInfo.blob(), res => {
            }, res => {
                success(res);
            }, res => {
                failure("上传失败")
            })

        }
    }

    created() { }

    mounted() {
        this.html = this.data;
        tinymce.init({});
    }

    beforeDestroy() {
    }

    @Watch("data")
    watchData(value: any, oldValue: string) {
        this.html = value;
    }
    @Watch("html")
    watchDataHtml(value: any, oldValue: string) {
        this.$emit('editor_change', this.html);
    }


}
</script>
<style lang="less" scoped>
/deep/.tox-tinymce-aux {
    z-index: 19891016;
}
</style>